<template>
  <div class="container">
    <MyNavBar></MyNavBar>
    <br>
    <br>
    <br>
    <h2 style="text-align: center">前端session案例</h2>
    <hr>
    <el-row :gutter="20">
      <el-col :span="12" :offset="6">
        <div class="grid-content bg-purple" style="text-align: center">
          <!--属于同一次会话-->
          <a href="/case/other">href从当前页面跳转</a><br>
          <!--这种情况默认是新会话，看是否写了opener属性-->
          <!---->
          <a href="/case/other" target="_blank" rel="noopener">href打开新页面跳转</a><br>

          <!--这种情况默认是新会话，如果写了opener属性，那么就是同一次会话-->
          <!--
          <a href="/case/other" rel="opener" target="_blank">href打开新页面跳转</a><br>
          -->

          <el-button style="margin-top: 10px" @click="windowOpen()">window的open方法打开</el-button>
          <br>
          <el-button style="margin-top: 10px" type="primary" @click="windowLocationOpen()">window的location方法打开
          </el-button>
          <br>
          <el-button style="margin-top: 10px" type="warning" @click="routerPush()">router的push方法打开</el-button>
          <br>
          <el-button style="margin-top: 10px" type="success" @click="routerReplace()">router的replace方法打开
          </el-button>
          <br>
          <el-button @click="doSaveToSession()">保存属性到sessionStorage</el-button>
        </div>
      </el-col>
    </el-row>
    <MyFooter></MyFooter>
  </div>
</template>

<script>
import MyNavBar from "@/components/MyNavBar.vue";
import MyFooter from "@/components/MyFooter.vue";

export default {
  name: "SessionView",
  components: {
    MyNavBar,
    MyFooter

  },
  data() {
    return {
      msg: 'hello,javascript'
    }
  },
  mounted() {
    //sessionStorage.setItem("mycity","西安");
  },
  methods: {
    windowOpen() {
      window.open('/case/other');
    },

    windowLocationOpen() {
      window.location.href = '/case/other';
    },

    routerPush() {
      this.$router.push({path: '/case/other'}).catch(() => {
      });
    },

    routerReplace() {
      this.$router.replace({path: '/case/other'}).catch(() => {

      })
    },

    doSaveToSession() {
      sessionStorage.setItem("mycity", "西安");
    }

  }

}
</script>

<style scoped>
.container {
  width: 100%;
  height: auto;
  margin: 0 auto;

}
</style>